<script>
import { getEnergyUnitName } from '@/utils'
import ChartResizeListener from '@/mixins/chart-resize-listener'

export default {
  name: 'historical-data',
  mixins: [ChartResizeListener],
  data () {
    return {
      energy: 'electric',
      year: '2023',
      lists: [],
      option: {},
      pickerOptions: {
        disabledDate (date) {
          return date > new Date()
        }
      },
    }
  },
  mounted () {
    this.searchHandler()
  },
  methods: {
    getEnergy () {
      const energy = this.energy
      const unitName = getEnergyUnitName(energy)
      const obj = {
        electric: '电力',
        coal: '煤炭',
        gas: '天然气',
        other: '其他能源'
      }
      return {
        energy,
        unitName,
        energyText: obj[energy]
      }
    },
    chartOption (lists) {
      const { unitName, energyText } = this.getEnergy()
      const months = Array(12).fill(1).map((v, i) => `${i + 1}月`)
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: months,
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          name: unitName,
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            name: energyText,
            smooth: true,
            itemStyle: {
              color: '#08a1a3'
            },
            lineStyle: {
              color: '#08a1a3'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 1, color: 'rgba(8,161,163,0.1)'
                }, {
                  offset: 0, color: '#08a1a3'
                }],
              },
            },
            data: lists
          }
        ]
      }
    },
    searchHandler () {
      this.lists = Array(12).fill(1).map(() => (Math.random() * 2000 + 1000).toFixed(2))
      this.option = this.chartOption(this.lists)
    },
  },
}
</script>

<template>
  <div class="flex padding direction-column width-100 height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="能源类型">
          <el-select v-model="energy">
            <el-option value="electric" label="电力"></el-option>
            <el-option value="coal" label="煤炭"></el-option>
            <el-option value="gas" label="天然气"></el-option>
            <el-option value="other" label="其他能源"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年份">
          <el-date-picker type="year" v-model="year" value-format="yyyy" format="yyyy" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchHandler">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-1 bg-white chart-container" ref="container">
      <v-chart ref="chart" :option="option" style="width: 100%;height:100%"></v-chart>
    </div>
  </div>
</template>
